<template>
	<view class="bod main">
		<view class="s_main" :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<view v-for="(item,index) in data" :key="index" :class="item.rows==0?'img1':'img2'">
				<image @click="imgClick(item)" :src="webImgUrl+item.banner" mode="" />
			</view>
			<!-- <navigator url="/pages/server/serverDetail/serverDetail" hover-class="navigator-hover" open-type="navigateBack">
				<button type="default">跳转到新页面</button>
			</navigator> -->
		</view>
	</view>
</template>

<script>
	import zdmb from "../../components/zdmb.vue"
	export default {
		components: {
			zdmb
		},
		data() {
			return {
				title: '服务',
				webImgUrl: '',
				demo: {
					top: '',
					height: ''
				},
				server: {
					column: '6f318c71-4cfe-11ec-9573-5254003b9aa7',
					currentPage: 1,
					pageSize: 20
				},
				data: []
			}
		},
		created() {
			// 获取图片前缀
			this.webImgUrl = this.$webUrl
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			this.serverList(this.server)
		},
		methods: {
			//服务列表
			serverList(data) {
				this.$myResquest.getNewsList(data).then(res => {
					if (res.data.code == 200) {
						this.data = res.data.data
					}
				})
			},
			// 跳转到详情
			imgClick(item) {
				uni.navigateTo({
					url: '/pages/server/serverDetail/serverDetail?title=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bod {
		position: absolute;
		width: 100%;
		min-height: 100%;
		background-color: #ffffff;
	}

	.s_main {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
		height: 100%;
		overflow: auto;

		view {
			margin-top: 20rpx;

		}
	}

	.main {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background: #ffffff;
		z-index: 10;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 170rpx;
	}

	.img1 {
		width: 334rpx;
		height: 200rpx;
		max-width: 334rpx;
		// max-height: 200rpx;

		float: left;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.img2 {
		width: 710rpx;
		height: 310rpx;
		max-width: 710rpx;
		// max-height: 200rpx;
		float: left;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
